<template>
  <div class="info" v-if="info">
    <div class="title">{{ info.questionnaireTitle }}</div>
    <div class="question_list">
      <div :class="['list_item',item.error?'error':'']" :id="`item_${index}`"  v-for="(item,index) in info.questionList">
        <div class="item_title">
          <span>{{ item.questionTitle }}</span>
          <span
            v-if="item.isRequired == 1"
            class="is_required"
            style="color: red"
          >
            *
          </span>
        </div>
        <div v-if="item.questionType == 1">
          <van-radio-group
            v-model="item.optionId"
            shape="dot"
            @change="item.error = null"
          >
            <van-radio
              :name="itg.questionOptionId"
              v-for="itg in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-radio>
          </van-radio-group>
        </div>
        <div v-if="item.questionType == 2">
          <van-checkbox-group
            v-model="item.optionId"
            shape="square"
            @change="item.error = null"
          >
            <van-checkbox
              :name="itg.questionOptionId"
              v-for="itg in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div v-if="item.questionType == 3">
          <van-field
            v-model="item.text"
            placeholder="请填写"
            @change="item.error = null"
            maxlength="50"
          />
        </div>
        <div v-if="item.questionType == 4">
          <van-field
            :model-value="item.text"
            maxlength="50"
            placeholder="请选择时间"
            @click="showSelectTime(item)"
          />
          <van-popup v-model:show="item.showTime" position="bottom">
            <van-date-picker
              @confirm="confirmTime(item)"
              @cancel="item.showTime = false"
              v-model="item.backText"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
              :columns-type="columnsType"
          /></van-popup>
        </div>
      </div>
    </div>
    <div class="save_btn" @click="save">提交</div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { queryQuestionnaireDetails, submitQuestionnaire } from "@/api/index";
import { useRoute } from "vue-router";
import useUserStore from "../../store/modules/user";
import { showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
let router = useRouter();
let route = useRoute();
let id = route.params.id;
let minDate = new Date("1970/01/01");
let maxDate = new Date("2100/01/01");
let info = ref(null);
const columnsType = ["year", "month", "day"];
let nowDay = new Date();
let defaultTime = [
  nowDay.getFullYear(),
  nowDay.getMonth() + 1,
  nowDay.getDate(),
];
function getInfo() {
  queryQuestionnaireDetails(id).then((res) => {
    info.value = res.data;
  });
}
getInfo();
function showSelectTime(item) {
  if (item.text) {
    item.backText = item.text.split("-");
  } else {
    item.backText = defaultTime;
  }
  item.showTime = true;
}
function confirmTime(item) {
  if (item.backText) {
    item.text = item.backText.join("-");
  }
  item.error = null;
  item.showTime = false;
}
let token = computed(() => user.$state.token);
function save() {
  if (!token) {
    user.isShow(true);
    return;
  }
  let backInfo = JSON.parse(JSON.stringify(info.value));
  let data = {
    questionnaireId: info.value.id,
    questionList: [],
  };
  let error = false;
  backInfo.questionList.forEach((item, index) => {
    if (item.isRequired == 1 && !item.optionId && !item.text) {
      if (!error) {
        document
          .getElementById(`item_${index}`)
          .scrollIntoView({ behavior: "smooth", block: "start" });
      }
      error = true;
      info.value.questionList[index].error = true;
    }
    if (item.questionType == 1) {
      item.optionId = [item.optionId];
    }
    data.questionList.push({
      questionId: item.questionId,
      questionTitle: item.questionTitle,
      questionType: item.questionType,
      isRequired: item.isRequired,
      optionId: item.optionId,
      text: item.text,
    });
  });
  if (data.questionList.length == 0 || error) {
    return;
  }
  console.log(data);
  submitQuestionnaire(data).then((res) => {
    showConfirmDialog({
      title: "提示",
      message: "表单提交成功",
      confirmButtonText: "查看提交列表",
      cancelButtonText: "返回服务",
    })
      .then(() => {
        router.push("/questionList");
      })
      .catch(() => {
        router.push("/server");
      });
  });
}
</script>

<style scoped lang="scss">
.info {
  padding: 16px 10px;

  .content {
    padding: 0 0px;

    :deep(img) {
      width: 100%;
    }
  }
}

.title {
  font-weight: bold;
  color: #333;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  color: var(--el-color-primary);
}

.info_type {
  font-size: 15px;
  color: #666;
}

.line {
  border-bottom: 1px dashed #ddd;
  margin: 20px 0;
}

.list_item {
  padding: 10px;
  &.error{
    border: 1px dashed red;
  }
  .is_required {
    margin-left: 4px;
    transform: translateY(3px);
    display: inline-block;
  }
}

.item_title {
  color: #333;
  font-size: 15px;
}

.save_btn {
  width: 200px;
  height: 40px;
  background: var(--el-color-primary);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-radius: 8px;

  &:active {
    background: var(--el-color-primaryop9);
  }
}
</style>
